<template>
  <div>
    <p>Axios发送网络请求</p>
    <div>
      <p>不需要权限</p>
      <button @click="get">get请求【获取】</button>&nbsp;&nbsp;&nbsp;
      <button @click="post">post请求【新增、修改】</button>&nbsp;&nbsp;&nbsp;
      <button @click="put">put请求【修改】</button>&nbsp;&nbsp;&nbsp;
      <button @click="del">delete请求【修改】</button>&nbsp;&nbsp;&nbsp;
    </div>
  </div>
</template>

<script>
import axios from 'axios'
// 设置基地址
axios.defaults.baseURL = 'http://huangjiangjun.top:3001/'
// 请求拦截器
axios.interceptors.request.use(
  function (config) {
    // 在发送请求之前做些什么
    config.headers.token = 'sadfasfdasd'
    return config
  },
  function (error) {
    // 对请求错误做些什么
    return Promise.reject(error)
  }
)

// 响应拦截器
axios.interceptors.response.use(
  function (response) {
    // 对响应数据做点什么
    console.log('---response---', response)
    // 相当于只是把响应体数据，返回给页面
    return response.data
  },
  function (error) {
    // 对响应错误做点什么
    return Promise.reject(error)
  }
)

export default {
  methods: {
    get () {
      axios({
        // url: 'api/person',
        url: 'admin/person',
        method: 'GET',
        params: {
          name: 'zhangsan',
          age: 100
        }
      }).then(res => {
        console.log('---res---', res)
      })
    },
    async post () {
      const res = await axios({
        // url: 'api/person',
        url: 'admin/person',
        method: 'POST',
        data: {
          username: 'admin',
          password: '123456'
        }
      })

      console.log('---res---', res, res.data.data.username)
    },
    // 函数前面加了async 就成了异步函数
    async put () {
      const res = await axios.put('admin/person/1001', {
        name: 'zhangsan',
        age: 100
      })

      console.log('---res---', res)
    },
    /**
     * 1、在函数前面加上async
     * 2、里面要有一个await与之匹配，并且await 后面一般接上promise对象
     */
    async del () {
      const res = await axios.delete('admin/person/1001', {
        params: {
          name: 'wangwu',
          age: 666
        }
      })

      console.log('---res---', res)
    }
  }
}
</script>
